<template>
	<!-- <view class="back">
		<view style="width: 100%;height:5vh;margin-top: 5vh">
			<view style="margin-left: 5vw;display: flex; align-items: center;height:5vh;"><text style="color: #fff;">追云健身俱乐部</text></view>
		</view>
		<view class="div2">
			<view class="div2-2" style="display: flex; align-items: center; justify-content: center;color: #636363;" @click="goSearch()">
			    <view style="float: left;"><u-icon name="search" size="38rpx" color="#636363"></u-icon></view>
			    <view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;"><text>查找相关订单</text></view>
			</view>
		</view>
		
		<view style="width: 100vw;height: 80vh;background: #fff;margin-top: 30rpx;border-radius: 70rpx 70rpx 0rpx 0rpx;padding-bottom:5vh;">

			<view style="overflow: auto;height: 75vh;width: 100%;">
				<view style="width: 90%;padding: 40rpx;">
				<view style="float: left;">
					课程
				</view> -->
	<!-- @tap="openTrain(item)" -->
	<!-- <view @click="seriesInsert" style="float: right;width:100rpx;color:#fff;height: 50rpx; border-radius: 10rpx; background-image: linear-gradient(to bottom right, #94A9FD, #9ECFFF, #b9e1ff); display: flex; align-items: center; justify-content: center;">
				  <text style="letter-spacing: 4px;font-size: 24rpx;">&nbsp;+新增</text>
				</view>
				</view>
				<view style="width: 90%;padding: 40rpx;" >
					<view @click="openTrain(item)" style="width: 90vw;background-color: #F7F7F7;margin: 0 auto;height:  80rpx;padding: 5px;box-sizing: border-box;margin-top: 10rpx;" v-for="item in planList">
						<view style="font-size: 30rpx;float: left;color: #000000;width: 90%;padding: 10rpx;">
							<view style="height: 35rpx;">
								<view style="display: flex;align-items: center;float: left;"><u-icon name="account"></u-icon>{{item.seriesName}}</view>
								<view style="float: right;color:red" @click.stop="del(item)">删除</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view> -->
	<view class="back">
		<!--头部-->
		<view style="height: 13%;">
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="https://ide.code.fun/api/image?token=658020ebfcfbac001139fd4f&name=3b8f508d119d287a8dfc01e289624070.png" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
					@click="goSearch()">
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="@/static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>

		<!--我的课程-->
		<view class="view1">
			<view style="width: 98vw;height: 6vh;">
				<view class="view2">
					<image class="tubiao" src="@/static/myclass.svg"></image>
				</view>
				<view class="view3">
					<text style="font-size: 20px;color: white;">我的系列课程</text>
				</view>
				<view class="view4">
					<image class="tubiao1" src="@/static/myclass-add.svg" @click="kai()"></image>
				</view>
			</view>
		</view>

		<!--学员课程-->
		<view class="view11">
			<view class="view7" v-for="(item,index) in planList">
				<view @click="goLession(item.id)">
					<uni-swipe-action>
						<uni-swipe-action-item :right-options="options2" :show="isOpened" :auto-close="false"
							@click="del(item.id)" :key="item.id">
							<view class="view6">
								<image class="tubiao1" src="@/static/myclass-cl.svg"></image>
							</view>
							<view class="view5">
								<text style="font-size: 20px;color: black;">{{item.seriesName}}</text>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
		</view>

		<!--添加课程-->
		<u-popup :show="kecheng" :round="10" mode="center" :closeOnClickOverlay="true" @click="guan()">
			<view style="width: 92vw;height: 25vh;">
				<view class="view8">
					<view class="view9">
						<!-- <text style="font-size: 1rem;text-align: center;display: flex;justify-content: center;align-items: center;">课程系列</text> -->
						课程系列
					</view>
					<view class="view10">
						<u-icon name="checkmark" @click="queding()" size="25px"></u-icon>
					</view>
				</view>
				<view class="view10-1">
					<u-textarea v-model="seriesName" placeholder="请输入您的健身系列课程名称..." height="160"></u-textarea>
				</view>
			</view>
		</u-popup>
		<tabbar selected-index=2></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				isOpened: 'none',
				options2: [{
						text: '编辑',
						style: {
							backgroundColor: '#007aff',
							'border-radius': '12px'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#F56C6C',
							'border-radius': '12px'
						}
					}
				],
				kecheng: false,
				seriesName: "",
				messageText: '',
				title: 'picker',
				errTitle: '',
				selectedIndex: 0,
				selectPlan: {},
				selectId: 0,
				multiArray: [],
				planArray: [],
				index: 0,
				show: false,
				errShow: false,
				courseList: [],
				planList: [],
				current: 0,
				selectStatus: 1,
				dayOfMonth: 0,
				daySelect: 0,
				today: '',
				msgType: 'sussess',
				form: []
			}
		},
		onShow() {
			this.getPlan()
		},
		onLoad() {
			this.getReservation()
			// this.getPlan()
		},
		methods: {
			goLession(id) {
				console.log("-----------------")
				console.log(id)
				uni.navigateTo({
					url: "/pages/coach/class/lession?id=" + id
				})

			},
			queding() {
				this.form.planArray = this.planArray
				this.form.coachId = uni.getStorageSync('teacherinfo').id
				this.form.venueUniqueIdentifier = uni.getStorageSync('teacherinfo').venueUniqueIdentifier
				console.log(this.form)
				console.log("--------")
				uni.request({
					url: this.URL + 'plan/addFitnessSeries',
					method: 'post',
					data: {
						coachId: this.form.coachId,
						seriesName: this.seriesName,
						planArray: this.form.planArray,
						venueUniqueIdentifier: this.form.venueUniqueIdentifier
					},
					// userInfo:res.
					success: (res) => {
						this.getPlan();
					},
					fail: (error) => {
						// 处理请求失败
						console.error('查询失败,请检查网络');
					},
				})
				this.kecheng = false;
				this.seriesName = '';
			},
			kai() {
				this.kecheng = true;
			},
			guan() {
				this.kecheng = false;
				this.seriesName = '';
			},
			del(item) {
				var ths = this
				uni.request({
					url: this.URL + 'plan/deleteFitnessSeries',
					method: 'delete',
					data: {
						id: item
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.getPlan()
						} else {

						}

					},
					fail: function(error) {
						// 处理请求失败
						console.error('删除失败');
					}
				})
			},
			seriesInsert() {
				uni.navigateTo({
					url: '/pages/class/seriesInsert'
				})
			},
			selectUser(item) {
				this.selectId = item.id
			},
			handleChange(event) {
				const selectedIndex = event.detail.value; // 获取选中的索引
				const selectPlan = this.planList[selectedIndex]; // 获取选中的对象数据
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/memberAddPlan',
					method: 'POST',
					data: {
						memberId: ths.selectId,
						seriesId: selectPlan.id
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							this.getReservation()
							ths.show = true
							setTimeout(() => {
								ths.show = false;
							}, 2000);
						} else {
							ths.errShow = true
							ths.errTitle = res.data.data
							setTimeout(() => {
								ths.errShow = false;
							}, 2000);
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})

			},
			getReservation() {
				var ths = this;
				uni.request({
					url: this.URL + 'AppCoach/getStudentByTeacherId',
					method: 'GET',
					data: {
						coachCode: uni.getStorageSync('teacherinfo').coachCode,
					},
					// userInfo:res.
					success: function(res) {
						ths.courseList = res.data.data;
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			getPlan() {
				var ths = this;
				uni.request({
					url: this.URL + 'plan/getFitnessCoachSeriess',
					method: 'GET',
					data: {
						coachId: uni.getStorageSync('teacherinfo').id,
						venueUniqueIdentifier: uni.getStorageSync('teacherinfo').venueUniqueIdentifier
					},
					// userInfo:res.
					success: function(res) {
						ths.planList = res.data.data.data;
						console.log(ths.planList)
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			goSearch() {

			},
			openTrain(item) {
				uni.navigateTo({
					url: '/pages/class/plan?item=' + JSON.stringify(item)
				})
			},
			open() {
				this.show = true
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		},
	}
</script>

<style>
	.back {
		width: 100vw;
		height: 100vh;
		background-color: rgb(237, 245, 247);
	}

	.div2 {
		width: 100%;
		height: 5vh;
	}

	.div2-2 {
		background-color: #fff;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}

	.view1 {
		width: 100vw;
		height: 8vh;
		float: left;
		border-bottom: 1px solid lightgray;
	}

	.view7 {
		width: 100vw;
		height: 7vh;
		float: left;
		margin-top: 10px;
		position: relative;
		/* 指定元素的定位方式是相对于其正常位置 */
		overflow: hidden;
		/* 裁剪多余的元素 */
		transition: transform 0.2s ease-in-out;
		/* 定义了元素属性变化的过渡效果 */

	}

	.view2 {
		width: 13vw;
		height: 6vh;
		background-color: rgb(110, 231, 240);
		float: left;
		margin-left: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 12px; //设置左上角圆角
		border-bottom-left-radius: 12px; //设置左下角圆角
		box-shadow: -4px 0px 8px rgba(0, 0, 0, 0.2);
	}

	.view3 {
		width: 70vw;
		height: 6vh;
		background-color: rgb(110, 231, 240);
		float: left;
		display: flex;
		align-items: center;
		box-shadow: 6px 1px 6px 0px rgba(0, 0, 0, 0.2);
	}

	.view4 {
		width: 13vw;
		height: 6vh;
		background-color: rgb(110, 231, 240);
		float: left;
		display: flex;
		align-items: center;
		border-top-right-radius: 12px; //设置右上角圆角
		border-bottom-right-radius: 12px; //设置右下角圆角
		box-shadow: 7px 0px 8px rgba(0, 0, 0, 0.2);
	}

	.view5 {
		width: 83vw;
		height: 6vh;
		background-color: white;
		float: left;
		display: flex;
		align-items: center;
		border-top-right-radius: 12px; //设置右上角圆角
		border-bottom-right-radius: 12px; //设置右下角圆角
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	}

	.view6 {
		width: 13vw;
		height: 6vh;
		background-color: white;
		float: left;
		margin-left: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 12px; //设置左上角圆角
		border-bottom-left-radius: 12px; //设置左下角圆角
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	}

	.view8 {
		width: 88vw;
		height: 5vh;
		display: flex;
		justify-content: center;
		float: left;
	}

	.view9 {
		width: 90vw;
		height: 5vh;
		margin-left: 4vw;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
	}

	.view10 {
		width: 3vw;
		height: 5vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view10-1 {
		width: 88vw;
		height: 12vh;
		margin-left: 2vw;
		margin-top: 5vh;
	}

	.view11 {
		width: 100vw;
		height: 79vh;
		float: left;
		overflow: auto;
	}

	.tubiao {
		width: 3rem;
		height: 3rem;
	}

	.tubiao1 {
		width: 2rem;
		height: 2rem;
	}
</style>